<template>
    <!--教师公示-->
  <div>
    <navigationBar @checkKey2="checkKey2"/>
    <div>

      <el-card class="box-card" style="width: auto">
        <el-row :gutter="20">
          <el-col :span="2">
            <div class="grid-content bg-purple">
              <span>知识体系:</span>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple">
              <el-button @click="specialty('java')">java</el-button>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple">
              <el-button @click="specialty('html')">html</el-button>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple">
              <el-button @click="specialty('vue')">vue</el-button>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple">
              <el-button @click="specialty('layui')">layui</el-button>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple">
              <el-button @click="specialty('mysql')">mysql</el-button>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple">
              <el-button @click="specialty('物联网')">物联网</el-button>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple">
              <el-button @click="specialty('云计算')">云计算</el-button>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <el-row>
        <el-col :span="24">
          <!--<div class="grid-content bg-purple-dark">-->
            <!--<h1></h1>-->
          <!--</div>-->
        </el-col>
      </el-row>

      <el-row>
        <el-col style="width:235px; margin-top:10px;" :span="6" v-for="(n, index) in teacherList" :key="n.teacherId"
                :offset="index%4==0 ? 2 : 2"><!--0 1 2 3 4 5 6 7....-->
          <el-card :body-style="{ padding: '10px' }">
            <img :src="n.teacherImg" class="image" @click="teacherInfo(n.teacherId)" style="height: 300px; width: 210px"><!--v-bind:src="和vue对象的属性绑定"-->
            <div style="padding: 5px;">
              <!--<span>{{n.nid}}</span>-->
              <span>{{n.teacherName}}</span><br/>
              <!--<span>{{n.nsource}}</span><br/>-->
              <div class="bottom clearfix">
                <!--<span>{{n.nwriter}}</span><br/>-->
                <el-button type="warning" class="button" @click="getteacherInfo(n.teacherId)">查看详情</el-button>
                <!--<el-button type="text" class="button" @click="gwc(n.nid)">购票</el-button>-->
              </div>
            </div>
          </el-card>

        </el-col>

      </el-row><el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageable.currentPage"
      :page-sizes="pageable.pageSizes"
      :page-size="pageable.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageable.total">
    </el-pagination>


    </div>
    <bottomPage/>
  </div>

</template>

<script>
  import navigationBar from './navigationBar'
  import bottomPage from './bottomPage'
    export default {
        name: "publicityPage",
      components:{
        navigationBar,
        bottomPage
      }
  ,data(){
    return{

      imageTitle:'',
      showOverlay: false,
      overlayText: '',
      keyword:'',
      keyword2:'',
      pageable:{
        currentPage:1,
        pageSizes:[4,8,12],
        pageSize:12,
        total:10
      },
      teacherList: [
        {
          "teacherId": 1,
          "teacherName": "李无",
          "teacherPass": "123456",
          "teacherTel": "123456",
          "teacherSex": "男",
          "teacherEmail": "222@qq.com",
          "teacherCareid": "123456",
          "teacherAddr": "北京市",
          "teacherImg": "https://img2.baidu.com/it/u=1732069251,2018033481&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=641",
          "roleId": 2,
          "teacherTeach": "html"
        }
      ]
    }
  },  methods:{
          //点击专业
        specialty(Specialty) {
          // 在这里处理点击事件，例如进行搜索操作
          console.log('点击了知识体系:', Specialty);
          // 进行搜索操作...
          this.keyword2=Specialty;
          this.findAll()
        },

        //搜索的关键字
        checkKey2(search){
          this.keyword=search;
          this.findAll();
        },

        handleSizeChange(val) {
          // console.log(`每页 ${val} 条`);
          this.pageable.pageSize=val;
          this.findAll();
        },
        handleCurrentChange(val) {
          // console.log(`当前页: ${val}`);
          this.pageable.currentPage=val;
          this.findAll();
        },
        findAll() {
          this.$axios.get("/teacher/find", {
            params: {
              page:this.pageable.currentPage,
              limit:this.pageable.pageSize,
              teacherName:this.keyword,
              teacherTeach:this.keyword2
            }
          }).then(res => {
            this.teacherList = res.data.records;
            this.pageable.total=res.data.total;//res-->ResultMsg(data)
          })
        },
        getteacherInfo(teacherId){
          //this.$router.push('/teacherInfo')
          this.$router.push({name:'teacherInfo',params:{teacherId:teacherId}})
        },
        teacherInfo(teacherId){
          this.$router.push({name:'teacherInfo',params:{teacherId:teacherId}})
        },
      },
      mounted() {
        this.findAll();
      }


    }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
  }

  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  /*.bg-purple-dark {*/
    /*background: #99a9bf;*/
  /*}*/
  /*.bg-purple {*/
    /*background: #d3dce6;*/
  /*}*/
  /*.bg-purple-light {*/
    /*background: #e5e9f2;*/
  /*}*/
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  /*.row-bg {*/
    /*padding: 10px 0;*/
    /*background-color: #f9fafc;*/
  /*}*/
</style>
